<template>
    <v-card>
        <v-flex xs12 sm10>
            <v-flex xs4>
                <v-btn color="primary" @click="dialogVisible=true">新增分类</v-btn>
                <el-dialog
                        title="添加/修改分类"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="Close"
                        >
                  <el-form  :model="formInline" ref="addForm" class="demo-form-inline">
                    <el-form-item label="分类名称">
                      <el-input v-model="formInline.name" placeholder="请输入..."></el-input>
                    </el-form-item>
                    <el-form-item label="分类描述">
                      <el-input v-model="formInline.describle" placeholder="请输入..."></el-input>
                    </el-form-item>
                    <el-form-item label="父级分类">
                      <el-cascader
                              v-model="formInline.parent"
                              :options="tableData"
                              :props="cascaderProps"
                              clearable></el-cascader>
                    </el-form-item>
                    <el-form-item>
                      <el-button  @click="dialogVisible=false">取消</el-button>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="saveOrUpdate">保存</el-button>
                    </el-form-item>
                  </el-form>
                    <span slot="footer" class="dialog-footer"></span>
                </el-dialog>
            </v-flex>
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="id"
                        label="id"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        sortable
                        width="180">
                </el-table-column>
              <el-table-column
                      prop="description"
                      label="描述"
                      sortable
                      width="180">
              </el-table-column>
                <el-table-column
                        prop="level"
                        label="等级">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <v-btn icon @mouseover="c2='success'" @mouseout="c2=''" :color="c2"
                               @click.stop="handleEdit(scope.row.id,scope.row)">
                            <i class="el-icon-edit"/>
                        </v-btn>
                        <v-btn icon @mouseover="c3='error'" @mouseout="c3=''" :color="c3"
                               @click.stop="handleDelete(scope.row.id)">
                            <i class="el-icon-delete"/>
                        </v-btn>
                    </template>
                </el-table-column>
            </el-table>
        </v-flex>
    </v-card>
</template>

<script>
    export default {
        inject: ['reload'],
        name: "category",
        data() {
            return {
              formInline: {
                id:0,
                name:'',
                describle:'',
                parent:0
              },
              cascaderProps: {
                //可以选中一级内容
                checkStrictly: true,
                //指定触发方式
                expandTrigger: 'hover',
                //数据源的id做数据绑定
                value: 'id',
                //数据源name渲染出来的内容
                label: 'name',
                //数据源的children做嵌套
                children: 'children'
              },
              dialogVisible: false,
                c1: '',
                c2: '',
                c3: '',
                tableData: [],
                isEdit: true
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            getTableData() {
                this.$http.get("/category/getByCase")
                    .then(res => {
                        if (res.data.code === 200) {
                            this.tableData = res.data.data
                            if(this.tableData === []||this.tableData === null) {
                                this.tableData.push(0)
                            }
                        }
                    }).catch()
            },
            saveOrUpdate() {
                console.log(this.formInline.parent)
                // 发起请求
              this.formInline.parent = 0? 0: this.formInline.parent[this.formInline.parent.length-1]
                this.$http.post("/category/addOrEdit",
                  this.formInline
                )
                    .then(res =>{
                      if(res.data.code === 200){
                          this.$message.success("保存成功")
                          this.formInline.parent=0;
                          this.formInline.name='';
                          this.formInline.describle='';
                          this.formInline.id=0;
                        this.getTableData()
                        this.dialogVisible = false
                      }
                    })
                    .catch()
            },
          Close(done) {
            this.$confirm('确认关闭？')
                    .then(_ => {
                      this.formInline.parent=0;
                      this.formInline.name='';
                      this.formInline.describle='';
                      this.formInline.id=0;
                      done();
                    })
                    .catch(_ => {});
          },
            handleEdit(index, thisCate) {
              this.formInline.id = thisCate.id
              this.formInline.describle = thisCate.description
              this.formInline.parent = thisCate.parentId
              this.formInline.name = thisCate.name
              this.dialogVisible = true
            },
            handleDelete(id) {
                this.$http.post("/category/remove",this.$qs.stringify({id:id}))
                    .then(res=>{
                        if(res.data.code===200){
                            this.$message.success("已删除")
                            this.reload();
                        }else {
                            this.$message.error("删除失败")
                        }
                    })
                    .catch()
            }
        }
    };
</script>

<style scoped>

</style>
